<template>
  <div class="search-music-right-login">
    <div class="wrap">
      <div class="login-text">
        登录网易云音乐，可以享受无限收藏的乐趣，而且无限同步到手机
      </div>
      <div class="login-btn">
        <button>用户登录</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.search-music-right-login {
  margin: auto;
  width: 100%;
  height: 126px;
  background: #fff;
  box-shadow: 0px 2px 1px #ccc;
  .wrap {
    width: 99%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(to bottom right, #e8e8e8, rgb(243, 241, 241));
    .login-text {
      width: 80%;
      font-size: 10px;
      transform: scale(0.9);
      color: rgb(80, 79, 79);
    }
    .login-btn {
      width: 100%;
      height: 31px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        color: #fff;
        font-size: 10px;
        transform: scale(0.9);
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px 20px;
        background: #d9131a;
        text-shadow: 0 1px 0 #8a060b;
        &:hover {
          cursor: pointer;
          background: #ce0f16;
        }
      }
    }
  }
}
</style>
